import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchMovies } from "@/store/actions/movies";

//类组件：componentWillMount 服务端运行
//类组件：componentDidMount  服务端不运行
function Pager({ movies, loadMovies }) {
  // console.log("render"); // 在服务端和客户端都会运行
  useEffect(() => {
    // 在服务端不会运行
    // 如果服务器没有处理数据，则需要加载数据
    if (window.requestPath === "/movies") return;
    loadMovies && loadMovies();
  }, []);
  return (
    <div>
      <h1>电影列表1</h1>
      <ul>
        {movies.map((it) => (
          <li key={it.uid}>{it.name}</li>
        ))}
      </ul>
    </div>
  );
}

// 在组件服务端渲染之前需要运行的函数
Pager.loadData = async function (store) {
  await store.dispatch(fetchMovies());
};

export default connect(
  (store) => {
    return { movies: store.movies };
  },
  (dispatch) => {
    return {
      loadMovies: () => {
        dispatch(fetchMovies());
      },
    };
  }
)(Pager);
